<template>
    <div>
        <vheader :ismini="iscollapse" :clientWidth="clientWidth"></vheader>
        <el-container class="content_main" style="border:0px solid #e3e3;">
            <el-main >
                <!-- <el-steps :active="0" align-center>
                    <el-step title="新增主题"></el-step>
                    <el-step title="新增（关联）属性"></el-step>
                    <el-step title="新增产品"></el-step>
                </el-steps> -->
              <el-row  :gutter="12">
                <el-col :span="24" style="margin-bottom:10px;">
                  <el-alert
                    title="主题列表数据"
                    type="success"
                    :closable="false">
                  </el-alert>
                </el-col>
                <el-col :span="columnspan" v-for="df in loadDate.draftSubjectList" :key="df.Id">
                  <el-card :body-style="{ padding: '10px' }" shadow="hover">
                    <img :src="df.ListImg" class="image" style="width:100%;height:auto;" >
                    <div style="padding: 5px;">
                      <div style="height:50px;">{{df.FullName}} - {{df.Resume}}</div>
                      <div class="bottom clearfix">
                        <el-button type="text" class="button" @click="onLook(df.Id)">查看</el-button>
                        <el-button type="text" class="button" @click="onEdit(df.Id)">编辑</el-button>
                      </div>
                    </div>
                  </el-card>
                </el-col>
                
              </el-row>
            </el-main>
        </el-container>
        <vfooter></vfooter>
    </div>
</template>

<script>
import vheader from "../common/Header";
import vfooter from "../common/Footer";
import mavonEditor from "../common/ui/editor";
// import { mavonEditor } from 'mavon-editor';
// import Marked from 'marked';
import { SubjectType, Tag, page, page_rule } from "../../data/base_data";
import { baseUrl, routerMode, baseImgPath } from "../../config/env";

export default {
  data() {
    return {
      iscollapse: false,
      clientWidth:1300,
      columnspan:6,
      isshowfooter: false,
      key: "",
      baseDate: {
        SubjectTypelist: [],
        Taglist: [],
        curpage: {}
      },
      loadDate: {
        draftSubjectList: []
      },
      tags: [],
      form: {
        SubjectType: 1,
        FullName: "",
        ShortName: "",
        EnName: "",
        Tag: "",
        tags: "",
        Remark: "",
        Resume: "",
        CreateTime: ""
      },
    };
  },
  methods: {
    handleClick(row) {
      console.log(row);
    },
    loadDraftSubject: function() {
      var rule = {};
      this.baseDate.curpage.FilterGroup.Rules = [rule];
      //post数据
      this.$http
        .post(baseUrl + "api/Admin/ContrastSubject/Read", this.baseDate.curpage)
        .then(
          function(res) {
             this.loadDate.draftSubjectList = res.body.Rows.select(function(r){
                  r.ListImg = '../static/noimg.png';
                  return r;
              });
          },
          function(res) {
            alert("操作数据获取失败");
          }
        );
    },
    onEdit:function(id){
      var sid = id;
      this.$router.push({ path: `/step1/${sid}` }); // -> /user/123
    },
    onLook:function(id){
      var sid = id;
      this.$router.push({ path: `/contentshow/${sid}/0` }); // -> /user/123
    }
  },
  mounted: function() {
    this.baseDate.SubjectTypelist = SubjectType;
    this.baseDate.Taglist = Tag;
    this.baseDate.curpage = page;
    let self = this;
    this.loadDraftSubject();
    window.onresize = function() {
      self.clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
      self.clientWidth = document.documentElement.clientWidth;
      $(".el-main").height(self.clientHeight - 140);

      //获取宽度
      self.iscollapse = self.clientWidth < 768;

      //获取宽度
      if (self.clientWidth < 475) {
          self.columnspan = 12;
      } 
      else if (self.clientWidth < 768) {
          self.columnspan = 8;
      }
      else {
          self.columnspan = 4;
      }
    };
    window.onresize();
  },
  components: {
    vheader,
    vfooter,
    mavonEditor
  }
};
</script>
<style scoped>

.el-card{
    font-size:15px;
}

@media screen and (min-height: 375px) { 
  .el-card{
    font-size:13px;
  }
} 

#content_module {
  width: 100%;
  padding: 0;
  margin: 0 auto;
}
.content_main {
  padding: 0;
  margin: 0 auto;
  margin-top: 0px;
}
</style>
